<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url(img/img.png);
        background-size: 100%;
      }
      .header {
        margin-top: 200px;
        font-size: 30px;
        color: #fff;
        text-align: center;
      }
      .btn {
        width: 100px;
        height: 50px;
        border: 0;
        font-size: 20px;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
        background-color: black;
      }
      .start-name {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <p>天命人</p>
      <p class="class-name">大圣</p>
      <p>该你了</p>
    </div>
    <div class="start-name">
      <button class="btn start">开始点名</button>
      <button class="btn stop">停止</button>
    </div>

    <script>
      // 名单
      let arr = [
        "王逸彬",
        "侯宇博",
        "李宏瑞",
        "杨荣芳",
        "谷孝颖",
        "张金龙",
        "乔丽娇",
        "邓文柱",
        "孙嘉隆",
        "江缨珊",
        "何路杨",
        "高婷",
        "李玮",
        "杜怡凡",
        "吕景贤",
        "彭锦琦",
        "何政佳",
        "张敏学",
        "门玉明",
        "王梦渝",
        "李天旭",
        "高柏文",
        "张梓鹏",
        "孟成旺",
        "周靖轩",
        "张哲",
        "张骏驰",
        "朱旭",
        "倪学桐",
        "李梦轩",
        "周奎",
        "肖鉥波",
        "韩胜",
        "周海祥",
        "李浩阔",
        "李铭帅",
        "宋紫阳",
        "徐博",
        "许艳辉",
        "白鑫华",
        "崔岩",
        "孟庆诺",
        "王阔",
        "刘智辉",
      ];

       // 开始
       let _start = document.querySelector(".start");
        // 定时器的 id
        let timeId = null;
        // 随机数
        let x = -1;
        _start.addEventListener("click", function () {
            timeId = setInterval(function () {
                // 遍历名单
                for (let i in arr) {
                    // 随机数
                    x = Math.floor(Math.random() * arr.length);
                    // 去重，去掉点过的人名
                    while (arr[x] == null) {
                        x = Math.floor(Math.random() * arr.length);
                    }
                    // 打印在浏览器上
                    document.querySelector(".class-name").innerHTML = arr[x];
                }
            }, 20)
        });

        // 停止
        let _stop = document.querySelector(".stop");
        _stop.addEventListener("click", function () {
            // 点过的人名复制为 null
            arr[x] = null;
            clearInterval(timeId);
        });


    </script>
  </body>
</html>
